<template >
  <el-dialog v-model="roleAndMenuDialog" title="角色关联菜单" width="800">
    <el-form >
      <el-form-item label="角色名" label-width="80">
        <el-text>{{role.roleName}}</el-text>
      </el-form-item>
    </el-form>
    <el-tree
        v-loading="rmload"
        style="max-width: 600px"
        class="el-tree"
        :check-strictly="checksStrictly"
        :data="formData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="checkedList"
        @check-change="handleSelectionChange"
        @check="handleSelectNode"
        :check-on-click-node="true"
        :props="defaultProps"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roleAndMenuDialog = false">关闭</el-button>
        <el-button @click="save" type="primary" :disabled="saveDisable">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, defineModel, defineProps, nextTick, onMounted, ref} from "vue";
import {reactive} from "vue";
import axios from '@/axios/index.js'
import {ElMessage} from "element-plus";

let roleAndMenuDialog = defineModel('roleAndMenuDialog')
let props = defineProps(['row'])
let role = reactive({
  id: props.row.id,
  roleName: props.row.roleName
})
let rmload = ref(true)
let formData = reactive([])
let rmFormData = reactive({
  roleId: props.row.id,
  menuIds: []
})
let checkedList = reactive([])
let defaultProps = {  //树形控件配置
  children: 'children',
  label: 'menuName'
}
let checksStrictly = ref(true)
let saveDisable = ref(false)

function handleSelectNode(data,checked){
  rmFormData.menuIds=checked.checkedKeys;
  if(checked.halfCheckedKeys!=null && checked.halfCheckedKeys.length>0){
    for (let i = 0; i < checked.halfCheckedKeys.length; i++) {
      rmFormData.menuIds.push(checked.halfCheckedKeys[i])
    }
  }
}

//菜单选择改变
function handleSelectionChange(val, status,son) {
  if (status) {
    if(rmFormData.menuIds === null){
      rmFormData.menuIds=[]
    }
    //添加父菜单
    if (val.pid!== 0) {
      if(rmFormData.menuIds.length === 0){
        rmFormData.menuIds.push(val.pid)
      }else {
        let num=0;
        for (let i = 0; i < rmFormData.menuIds.length; i++) {
          if (rmFormData.menuIds[i] === val.pid) {
            num++;
          }
        }
        if (num === 0) {
          rmFormData.menuIds.push(val.pid)
        }
      }
    }
    //添加选择的菜单
    let num=0;
    for (let i = 0; i < rmFormData.menuIds.length; i++) {
      if (rmFormData.menuIds[i] === val.id) {
        num++;
      }
    }
    if (num === 0) {
      rmFormData.menuIds.push(val.id)
    }

  } else {
    if (!son){
      if (rmFormData.menuIds !== null){
        rmFormData.menuIds = rmFormData.menuIds.filter((item) => item !== val.id);
      }
    }

  }
}


//获取菜单
async function getMenu() {
  //获取所有菜单
  let resp1 = await axios.get("/menu",{params:{
      pid: '0',
      status: 1
    }})
  formData = resp1.data
  //获取角色关联的菜单
  let resp2 = await axios.get("/role-menu/getMenu?roleId="+props.row.id)
  checkedList = resp2.data.data
  rmFormData.menuIds =checkedList
  rmload.value = false
  checksStrictly.value=false
}

//保存
function save() {
  saveDisable.value= true;
  axios.post('role-menu/edit', rmFormData).then(resp=>{
    ElMessage({
      message: resp.data.message,
      type: 'success',
      duration: 1500,
      onClose: function(){
        roleAndMenuDialog.value = false
      }
    })
  })
}


getMenu();


</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}


.el-tree {
  height: 400px; /* 设置 el-tree 的高度 */
  overflow-y: auto; /* 开启垂直滚动条 */
}

.el-tree .el-tree-node__content {
  height: 30px; /* 设置每个节点的高度 */
  line-height: 30px; /* 节点内部的行高 */
}
</style>
